<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c" width="600" height="400" style="border: 1px solid #ccc"></canvas>

        <script>
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')

            class Heart {
                constructor(x, y) {
                    this.x = x
                    this.y = y
                    this.color = 'red'
                    this.heartPath = new Path2D();
                    this.isIn = false;
                    this.eventList = {
                        hover:[],
                        leave:[]
                    }
                    cnv.onmousemove=(e)=>{
                        let x = e.offsetX
                        let y = e.offsetY
                        this.isIn = ctx.isPointInPath(this.heartPath,x,y)
                        if(this.isIn){
                            this.eventList.hover.forEach((item)=>{
                                item()
                            })
                            // console.log('yes')
                            // this.color = 'blue'
                        }else{
                            this.eventList.leave.forEach((item)=>{
                                item()
                            })
                            // this.color = 'red'
                            // console.log('no')
                        }
                        // this.draw()
                    }
                }
                onHover(fn){
                    this.eventList.hover.push(fn)
                }
                onLeave(fn){
                    this.eventList.leave.push(fn)
                }
                setPosition(x, y) {
                    this.x = x
                    this.y = y
                }
                draw() {
                    ctx.clearRect(0,0,600,400)
                    this.heartPath.moveTo(this.x, this.y) // 300 200
                    this.heartPath.bezierCurveTo(this.x + 50, this.y - 50, this.x + 100, this.y, this.x, this.y + 50)
                    this.heartPath.bezierCurveTo(this.x - 100, this.y, this.x - 50, this.y - 50, this.x, this.y)
                    ctx.save()
                    ctx.fillStyle = this.color
                    console.log('this.color',this.color)
                    ctx.fill(this.heartPath)

                    // let isIn = ctx.isPointInPath(this.heartPath,300,200)
                    // console.log(isIn)
                    ctx.restore()
                }
            }
            let heartPath = new Heart(300, 200)
            // heartPath.setPosition(100,100)
            heartPath.draw()
            heartPath.onHover(()=>{
                heartPath.color = 'blue';
                heartPath.draw()

            })
            heartPath.onLeave(()=>{
                heartPath.color = 'red';
                heartPath.draw()
            })

            // var heartPath = new Path2D()
            // heartPath.moveTo(300, 200)
            // heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250)
            // heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200)

            // ctx.stroke(heartPath)
            // ctx.fill(heartPath)

            // var chartPath = new Path2D()
            // chartPath.moveTo(200, 300)
            // chartPath.quadraticCurveTo(150, 300, 150, 200)
            // chartPath.quadraticCurveTo(150, 100, 300, 100)
            // chartPath.quadraticCurveTo(450, 100, 450, 200)
            // chartPath.quadraticCurveTo(450, 300, 250, 300)
            // chartPath.quadraticCurveTo(250, 350, 150, 350)
            // chartPath.quadraticCurveTo(250, 350, 200, 300)

            // ctx.stroke(chartPath)
        </script>
    </body>
</html>
